<template>
  <div class="naive-ui-example p-6 bg-gray-50 rounded-lg shadow-md">
    <h2 class="text-xl font-bold mb-4">Naive UI 示例</h2>
    
    <div class="mb-4">
      <n-input
        v-model:value="inputValue"
        placeholder="请输入内容"
        :disabled="isDisabled"
      />
    </div>
    
    <div class="mb-4 flex gap-3">
      <n-button type="primary" @click="handleClick">主要按钮</n-button>
      <n-button type="success">成功按钮</n-button>
      <n-button type="warning">警告按钮</n-button>
      <n-button type="error">错误按钮</n-button>
      <n-button :disabled="isDisabled">禁用按钮</n-button>
    </div>
    
    <div class="mb-4">
      <n-switch v-model:value="isDisabled" label="禁用输入框" />
    </div>
    
    <div class="mb-4">
      <n-checkbox v-model:checked="checked" label="同意条款" />
    </div>
    
    <div class="mb-4">
      <n-radio-group v-model:value="radioValue">
        <n-radio value="option1" label="选项1" />
        <n-radio value="option2" label="选项2" />
        <n-radio value="option3" label="选项3" />
      </n-radio-group>
    </div>
    
    <div>
      <n-button @click="showMessage">显示消息</n-button>
      <n-button @click="showDialog" class="ml-3">显示对话框</n-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useMessage, useDialog } from 'naive-ui'

const inputValue = ref('')
const isDisabled = ref(false)
const checked = ref(false)
const radioValue = ref('option1')

const message = useMessage()
const dialog = useDialog()

const handleClick = () => {
  message.info(`输入的内容是: ${inputValue.value}`)
}

const showMessage = () => {
  message.success('这是一条成功消息')
}

const showDialog = () => {
  dialog.info({
    title: '对话框标题',
    content: '这是一个对话框示例',
    positiveText: '确定',
    negativeText: '取消'
  })
}
</script>

<style scoped>
.naive-ui-example {
  max-width: 800px;
  margin: 0 auto;
}
</style>